<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>临安区公共机构能源消耗调查明细表</h2>
      <span>({{year}}年单位基本情况)</span>
    </div>
    <div class="unitInfo-tableInfo">
      <div class="unitInfo-infoRow">
        <label>填报单位：</label>
        <span>{{energyData.DepartmentName}}</span>
        <span style="color:red">({{energyData.State=='0'?'未审':'已审'}})</span>
      </div>
      <div class="unitInfo-infoRow">
        <label>年份：</label>
        <span>{{year}}</span>
      </div>
      <div class="unitInfo-infoRow">
        <label>办公地址：</label>
        <span>{{energyData.OfficeAddress}}</span>
      </div>
    </div>
    <div class="unitInfo-tableContent">
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td rowspan="12" align="center" valign="middle" width="80px;">
            <strong>从业<br/><br/>人员<br/><br/>公务<br/><br/>车辆<br/><br/>办公<br/><br/>建筑<br/><br/>情况</strong>
          </td>
          <td>年用能人数</td>
          <td>{{energyData.PeopleTotal}}</td>
          <td>年末车辆总数</td>
          <td>{{energyData.CarTotal}}</td>
        </tr>
        <tr>
          <td style="padding-left:15px;">其中：在编人数</td>
          <td>{{energyData.PeopleIn}}</td>
          <td style="padding-left:15px;">其中：汽油车数量</td>
          <td>{{energyData.CarGasoline}}</td>
        </tr>
        <tr>
          <td style="padding-left:58px;">非在编人数</td>
          <td>{{energyData.PeopleOut}}</td>
          <td style="padding-left:58px;">柴油车数量</td>
          <td>{{energyData.CarDiesel}}</td>
        </tr>
        <tr>
          <td>地上办公室建筑面积(m
            <sup>2</sup>)</td>
          <td>{{energyData.AreaUp}}</td>
          <td style="padding-left:58px;">新能源汽车数量</td>
          <td>{{energyData.CarNewEnergy}}</td>
        </tr>
        <tr>
          <td>地下建筑用途</td>
          <td>{{energyData.AreaUse}}</td>
          <td>是否有用电分项(户)计量</td>
          <td>
            <label for="1">是</label>
            <input type="radio" value="true" v-model="energyData.HasElectricity">
            <label for="0">否</label>
            <input type="radio" value="false" v-model="energyData.HasElectricity">
          </td>
        </tr>
        <tr>
          <td>地下建筑面积(m
            <sup>2</sup>)</td>
          <td>{{energyData.AreaDown}}</td>
          <td>是否有用水分项(户)计量</td>
          <td>
            <label>是</label>
            <input type="radio" value="true" v-model="energyData.HasWater">
            <label>否</label>
            <input type="radio" value="false" v-model="energyData.HasWater">
          </td>
        </tr>
        <tr>
          <td>绿地面积(m
            <sup>2</sup>)</td>
          <td>{{energyData.AreaGreen}}</td>
          <td>外窗类型</td>
          <td>{{energyData.OutsideType}}</td>
        </tr>
        <tr>
          <td>办公室数量</td>
          <td>{{energyData.OfficeNum}}</td>
          <td>窗框类型</td>
          <td>{{energyData.FrameWindowType}}</td>
        </tr>
        <tr>
          <td>总配电容量</td>
          <td>{{energyData.OfficeCapacitance}}</td>
          <td>玻璃类型</td>
          <td>{{energyData.GlassType}}</td>
        </tr>
        <tr>
          <td>电表总表号码</td>
          <td>{{energyData.OfficeElectNum}}</td>
          <td>是否利用太阳能(或空气能)</td>
          <td>
            <label>是</label>
            <input type="radio" value="true" v-model="energyData.HasSolar">
            <label>否</label>
            <input type="radio" value="false" v-model="energyData.HasSolar">
          </td>
        </tr>
        <tr>
          <td>水表总表号码</td>
          <td>{{energyData.OfficeWaterNum}}</td>
          <td>有无食堂</td>
          <td>
            <label>是</label>
            <input type="radio" value="true" v-model="energyData.HasFood">
            <label>否</label>
            <input type="radio" value="false" v-model="energyData.HasFood">
          </td>
        </tr>
        <tr>
          <td>物业管理方式</td>
          <td>{{energyData.OfficeManageWay}}
            <td>有无浴室</td>
            <td>
              <label>是</label>
              <input type="radio" value="true" v-model="energyData.HasBathroom">
              <label>否</label>
              <input type="radio" value="false" v-model="energyData.HasBathroom">
            </td>
        </tr>
        <tr>
          <td rowspan="13" align="center" valign="middle">
            <strong>用能<br/><br/>设备<br/><br/>情况</strong>
          </td>
          <td align="center" valign="middle">设备类型</td>
          <td align="center" valign="middle">设备名称</td>
          <td align="center" valign="middle">台数</td>
          <td align="center" valign="middle">总功率(Kw)</td>
        </tr>
        <tr>
          <td rowspan="4" align="center" valign="middle">制冷(热)设备</td>
          <td valign="middle">办公空调</td>
          <td valign="middle">{{energyData.OfficeAirNum}}</td>
          <td valign="middle">{{energyData.OfficeAirPower}}</td>
        </tr>
        <tr>
          <td valign="middle">中央空调</td>
          <td valign="middle">{{energyData.CentralAirNum}}</td>
          <td valign="middle">{{energyData.CentralAirPower}}</td>
        </tr>
        <tr>
          <td valign="middle">冰箱</td>
          <td valign="middle">{{energyData.FridgeNum}}</td>
          <td valign="middle">{{energyData.FridgePower}}</td>
        </tr>
        <tr>
          <td valign="middle">锅炉</td>
          <td valign="middle">{{energyData.BoilerNum}}</td>
          <td valign="middle">{{energyData.BoilerPower}}</td>
        </tr>
        <tr>
          <td rowspan="8" align="center" valign="middle">办公室设备</td>
          <td valign="middle">电梯</td>
          <td valign="middle">{{energyData.ElevatorNum}}</td>
          <td valign="middle">{{energyData.ElevatorPower}}</td>
        </tr>
        <tr>
          <td valign="middle">电脑</td>
          <td valign="middle">{{energyData.ComputerNum}}</td>
          <td valign="middle">{{energyData.ComputerPower}}</td>
        </tr>
        <tr>
          <td valign="middle">打印机</td>
          <td valign="middle">{{energyData.PrinterNum}}</td>
          <td valign="middle">{{energyData.PrinterPower}}</td>
        </tr>
        <tr>
          <td valign="middle">复印机</td>
          <td valign="middle">{{energyData.PhotocopierNum}}</td>
          <td valign="middle">{{energyData.PhotocopierPower}}</td>
        </tr>
        <tr>
          <td valign="middle">传真机</td>
          <td valign="middle">{{energyData.FaxNum}}</td>
          <td valign="middle">{{energyData.FaxPower}}</td>
        </tr>
        <tr>
          <td valign="middle">交互机</td>
          <td valign="middle">{{energyData.MachineNum}}</td>
          <td valign="middle">{{energyData.MachinePower}}</td>
        </tr>
        <tr>
          <td valign="middle">服务器</td>
          <td valign="middle">{{energyData.ServerNum}}</td>
          <td valign="middle">{{energyData.ServerPower}}</td>
        </tr>
        <tr>
          <td valign="middle">稳压电源</td>
          <td valign="middle">{{energyData.SupplyPowerNum}}</td>
          <td valign="middle">{{energyData.SupplyPowerPower}}</td>
        </tr>
        <tr>
          <td colspan="4" valign="middle" align="right">合计总功率：</td>
          <td valign="middle" align="center">{{numTotal}}</td>
        </tr>
        <tr class="table-row">
          <td valign="middle" align="center">备注</td>
          <td colspan="4" valign="middle"></td>
        </tr>
        <tr class="table-row">
          <td valign="middle" align="center">审核<br/>意见</td>
          <td colspan="4">
            <el-input type="textarea" :rows="2" v-model="energyData.CheckRemark">
            </el-input>
          </td>
        </tr>
        <tr class="table-row">
          <td valign="middle" align="center">审核<br/>操作</td>
          <td colspan="4" valign="middle">
            <el-radio-group v-model="energyData.State">
              <el-radio :label="1">已审</el-radio>
              <el-radio :label="0">未审</el-radio>
            </el-radio-group>
          </td>
        </tr>
      </table>
      <div class="table-footers">
        <div class="tableFooter-row">
          <div class="tableFooter-col">
            <span>单位负责人：</span>
            <span>{{energyData.Creator.Boss}}</span>
          </div>
          <div class="tableFooter-col" style="padding-left:15px;">
            <span>联系电话：</span>
            <span>{{energyData.Creator.Telephone }}&nbsp;&nbsp;{{energyData.Creator.Mobile}}</span>
          </div>
          <div class="tableFooter-col">
          </div>
        </div>
        <div class="tableFooter-row">
          <div class="tableFooter-col">
            <span>填 &nbsp;&nbsp;表 &nbsp;&nbsp;&nbsp;人：</span>
            <span>{{energyData.Creator.LoginName}}</span>
          </div>
          <div class="tableFooter-col" style="padding-left:15px;">
            <span>传真：</span>
            <span>{{energyData.Creator.Fax}}</span>
          </div>
          <div class="tableFooter-col" style="text-align:right;">
            <span>填报日期：</span>
            <span>{{energyData.CreatedAt}}</span>
          </div>
        </div>
      </div>
      <div class="table-button">
        <el-button type="primary" size="mini" @click="submitEnergy">保存</el-button>
        <el-button type="info" size="mini" @click="$router.push('/unitInfo')">关闭</el-button>
        <el-button size="mini" @click="prints()">打印</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: '',
      departName: '',
      numTotal: '0',
      energyData: {
        PeopleTotal: 0,
        PeopleIn: 0,
        PeopleOut: 0,
        AreaUp: 0,
        AreaDown: 0,
        AreaGreen: 0,
        AreaUse: "",
        CarTotal: 0,
        CarGasoline: 0,
        CarDiesel: 0,
        CarNewEnergy: 0,
        HasElectricity: 0,
        HasWater: 0,
        HasSolar: 0,
        HasFood: 0,
        HasBathroom: 0,
        OutsideType: "",
        FrameWindowType: "",
        GlassType: "",
        OfficeNum: 0,
        OfficeCapacitance: 0,
        OfficeElectNum: 0,
        OfficeWaterNum: 0,
        OfficeManageWay: "",
        OfficeAirNum: 0,
        OfficeAirPower: 0,
        CentralAirNum: 0,
        CentralAirPower: 0,
        FridgeNum: 0,
        FridgePower: 0,
        BoilerNum: 0,
        BoilerPower: 0,
        ElevatorNum: 0,
        ElevatorPower: 0,
        ComputerPower: 0,
        ComputerNum: 0,
        PrinterPower: 0,
        PrinterNum: 0,
        PhotocopierPower: 0,
        PhotocopierNum: 0,
        FaxPower: 0,
        FaxNum: 0,
        MachinePower: 0,
        MachineNum: 0,
        ServerPower: 0,
        ServerNum: 0,
        SupplyPowerPower: 0,
        SupplyPowerNum: 0,
        DepartmentName: "",
        OfficeAddress: "",
        State: 0,
        CheckRemark: '',
        CreatedAt: '',
        Creator: {
          Boss: '',
          Fax: '',
          LoginName: '',
          Telephone: '',
          Mobile: ''
        }
      }
    }
  },
  methods: {
    async getDetail() {
      const result = await this.$get('/api/DepartmentEnergy/' + this.year, { departmentName: this.departName })
      this.energyData = result
      this.numTotal = (result.SupplyPowerPower * 1000 + result.ServerPower * 1000 + result.MachinePower * 1000 + result.FaxPower * 1000 +
        result.PhotocopierPower * 1000 + result.PrinterPower * 1000 + result.ComputerPower * 1000 + result.ElevatorPower * 1000 +
        result.BoilerPower * 1000 + result.FridgePower * 1000 + result.CentralAirPower * 1000 + result.OfficeAirPower * 1000) / 1000
    },
    async submitEnergy() {
      try {
        const resutl = await this.$post('/api/DepartmentEnergy/check/' + this.energyData.Id, {
          state: this.energyData.State,
          remark: this.energyData.CheckRemark
        })
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getDetail();
      }
      catch (error) {
        this.$message.error(error.message)
      }
    },
    prints() {
      if (window.print != null) {
        window.print();
      }
      else {
        this.$message({
          message: '您没有安装打印机，请安装后继续！',
          type: 'error'
        })
      }
    }
  },
  created() {
    this.showHome.isShow = false;
    this.year = this.$route.params.year
    this.departName = this.$route.params.departName
    this.getDetail()
  }
}
</script>
<style lang="scss" scoped>
.unitInfo-tableContainer {
  width: 100%;
  padding: 20px 15px;
}

.unitInfo-tableTitle {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
  h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  span {
    font-size: 16px;
    font-weight: bold;
  }
}

.unitInfo-tableInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
  color: #606266;
}

.unitInfo-tableContent {
  width: 100%;
  table {
    color: #606266;
    border: 1px solid #ebeef5;
    td {
      padding: 5px;
    }
    tr.table-row {
      height: 45px;
    }
  }
}

.table-footers {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  .tableFooter-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 25px;
    .tableFooter-col {
      flex: 1;
    }
  }
}

.table-button {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>


